import React from 'react';
import ImageGrid from './video';

class Container extends React.Component {
    goFullScreen = () => {
        const container = document.getElementById('iframeContainer');
        if (container.requestFullscreen) {
            container.requestFullscreen();
        } else if (container.mozRequestFullScreen) {
            container.mozRequestFullScreen();
        } else if (container.webkitRequestFullscreen) {
            container.webkitRequestFullscreen();
        } else if (container.msRequestFullscreen) {
            container.msRequestFullscreen();
        }
    }

    render() {
        return (
            <div style={styles.container}>
                <div>
                    <button style={styles.button} onClick={this.goFullScreen}>全屏显示</button>
                </div>
                <div id="iframeContainer" style={styles.iframe}>
                    <ImageGrid />
                </div>
            </div>
        );
    }
}

const styles = {
    container: {
        textAlign: 'center',
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
        backgroundColor: '#f4f4f4',
        fontFamily: 'Arial, sans-serif'
    },
    button: {
        padding: '10px 20px',
        margin: '10px',
        fontSize: '16px',
        color: 'white',
        backgroundColor: '#007BFF',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer',
        outline: 'none',
        transition: 'background-color 0.3s'
    },
    iframe: {
        width: '100%',
        height: '100%',
        border: 'none',
        boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    }
};

export default Container;